<template>
  <div class="rank_header">
      <div class="title">
        <img src="/assets/images/ranking.jpg" />
      </div>
  </div>
  <div class="rank_box">
      <div class="item" v-for="product in list" :key="product.id">
          <div class="top">
              <div class="img">
                  <img :src="product.thumbs_text" />
              </div>
              <div class="content">
                  <div class="title">{{product.name}}</div>
                  <p class="middle"><span>值得买</span></p>
                  <p class="desc">“{{product.comment}}”</p>
              </div>
          </div>
          <div class="footer">
              <div class="price">
                  ￥<span>{{product.price}}</span>
                  券后价
                  <span>{{product.flag_text}}</span>
              </div>
              <div class="btn">
                  去购买>
              </div>
          </div>
          <div class="tip">
              <img src="/assets/images/hot.png" />
              <span>热销指数9.9</span>
          </div>
      </div>
  </div>

  <Tabbar />
</template>

<script setup>
    const {proxy} = getCurrentInstance()
    const list = ref([])
    onBeforeMount(async()=>{
        let result = await proxy.$GET({url:'/product/ranking'})
        list.value = result
    })
</script>

<style scoped>
  @import url('/assets/css/ProductRank.css');
</style>